<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="UTF-8"/>
    <title>微分享-设置</title>
    <link rel="stylesheet" th:href="@{/static/assets/css/amazeui.min.css}"/>
    <style>
        .header {
            text-align: center;
        }

        .header h1 {
            font-size: 200%;
            color: #333;
            margin-top: 30px;
        }

        .header p {
            font-size: 14px;
        }
    </style>
    <script th:src="@{/static/assets/js/jquery.min.js}"></script>
    <script th:src="@{/static/assets/js/amazeui.min.js}"></script>
    <script th:src="@{/static/js/public.js}"></script>
<!--     <script th:src="@{/static/js/updateAccount.js}"></script> -->
    <script th:src="@{/static/lib/jquery-file-upload/js/vendor/jquery.ui.widget.js}"></script>
	<script th:src="@{/static/lib/jquery-file-upload/js/jquery.iframe-transport.js}"></script>
	<script th:src="@{/static/lib/jquery-file-upload/js/jquery.fileupload.js}"></script>
	<script type= "text/javascript" th:src ="@{/static/lib/layer/layer.js}"></script>   
	<script type= "text/javascript" th:src ="@{/dwr/util.js}"></script>   
	<script type="text/javascript" th:src= "@{/dwr/engine.js}"></script > 
	<script type="text/javascript" th:src= "@{/dwr/interface/NoticeContentController.js}"></script>
	<script type="text/javascript" th:src= "@{/static/js/dwrhelp.js}"></script>
</head>
<body>
<div class="header">
    <div class="am-g">
        <h1>重置账户信息</h1>
    </div>
    <hr/>
</div>
<div class="am-g">
    <div class="am-u-lg-6 am-u-md-8 am-u-sm-centered">
        <form method="post" class="am-form">
            <div class="signin">
                <p>密码：</p><input id='password' name='password' type="password" class="pass"/>
                <p>重复密码：</p><input id='repassword' name='repassword' type="password" class="user"/>
                <p>电话：</p><input id="phone" name='phone' type="text" class="user"/>
            </div>
        </form>
	       <div class="am-panel am-panel-default">
	         <div class="am-panel-bd">
	           <div class="am-g">
	             <div class="am-u-md-4">
	               <img id="head" class="am-img-circle am-img-thumbnail" th:src="${'/static/user/' + session.userId}" alt=""/>
	             </div>
	             <div class="am-u-md-8">
	               <p>你可以使用<a href="#">gravatar.com</a>提供的头像或者使用本地上传头像。 </p>
	               <form class="am-form">
	                 <div class="am-form-group">
	                   <input id="fileupload" type="file"  name="filesImage"/>
	                   <p class="am-form-help">请选择要上传的文件...</p>
	                 </div>
	               </form>
	             </div>
	           </div>
	         </div>
	       </div>
	             <div class="am-cf">
                    <input type="button" class="am-btn am-btn-primary am-btn-sm am-fl"
                           onclick='updateAccount()' value="确定"/>
                </div>
                <span id="error_message" style="color: red"></span>
        <p>周航@成都信息工程大学, All Rights Reserved.</p>
    </div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
$(function(){
	 'use strict';
	  $('#fileupload').fileupload({
		  autoUpload: true,
		  acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
		  maxNumberOfFiles : 1,
		  url:'/uploadImg'  ,
	 	  add:function (e, data) {
	 		var name = data.files[0].name;
	 	    var mime = name.toLowerCase().substr(name.lastIndexOf(".")); 
	 	    console.info(mime);
	 		if(mime!=".jpg" && mime!=".png" && mime!=".gif") {
	 		 	alert('只能上传jpg,png,gif等格式的图片');
	 			return;
	 		} else {
   	 			data.submit();
   	 		}
	 	  },
	 	  done: function (e, data) {
 	           var res = data.result;
 	           if(res.result){
 	        	 alert('上传成功');
 	        	$("#head").attr('src','/static/user/' + res.id);
 	           } else {
 	        	   alert(res.msg);
 	           }
 	        }
	    });
});

function updateAccount() {
    var clientId = $("#email").val();
    var clientSecret = $("#password").val();
    var phone = $('#phone').val();
    var repassword = $('#repassword').val();

    var postData = {
        username: clientId,
        password: clientSecret
    };
    var requestUrl = getRootPath() + "/updateAccount"; //要访问的api

    var errorMessage = "";
    var alias = '';
    $("#error_message").html(errorMessage);
    if (clientSecret == null || clientSecret == "") {

        errorMessage = "请输入密码";

        $("#error_message").html(errorMessage);
        return;
    }

    //var patt1 = new RegExp("^[0-9a-zA-Z_`~\\!@#\\$\\%\\^&\\*()\\-\\+=]{6,20}$");
    var patt1 = /^[0-9a-zA-Z_`~\\!@#\\$\\%\\^&\\*()\\-\\+=]{5,20}$/;
    if (!patt1.test(clientSecret)) {
        errorMessage = "密码格式不正确";

        $("#error_message").html(errorMessage);
        return;
    }

    if (clientSecret != repassword) {
        errorMessage = "两次输入的密码不一致";

        $("#error_message").html(errorMessage);
        return;
    }

    $.ajax({
        url: requestUrl,
        global: false,
        data: {
            password: clientSecret,
            phone: phone,
        },
        success: function (msg) {
            if (msg) {
                alert("修改成功");
                window.location.href = "normal_login";
            } else {
                $("#error_message").html(msg.msg);
            }
        }
    });
}
/*]]>*/
</script>
</body>
</html>
